<script setup lang="ts">
import { reactive, ref } from "vue";
import { onHide, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { usePageScroll } from "@/hooks/scroll";
import { useSwipe } from "@/hooks/swipe";
import { useAudio } from "@/hooks/audio";
import { guider_cash_index_api } from "@/api/guider_home";
import { Account } from "@/utils/account";
import { AppData } from "@/utils/app";
import { previewImage } from "@/utils/meida";
import { Date } from "@/utils/date";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";
import IndexMenuTitle from "./components/index-menu-title.vue";
import IndexMoreBtn from "./components/index-more-btn.vue";
import SquareTaskItem from "./components/square-task-item.vue";
import SquareTaskItem2 from "./components/square-task-item2.vue";
import MediaVideo from "@/components/media/video.vue";
import SquareStoreItem from "./components/square-store-item.vue";
import SquareExplainCard from "./components/square-explain-card.vue";
import MediaCircle from "@/components/media/circle.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {
    reloadData();

    AppData.initConfig((config) => {
      shareOption.title = config.share_info.title;
    });
  });
});
onHide(() => audioCtx.pause());
onPullDownRefresh(() => {
  reloadData()
    .then(() => uni.stopPullDownRefresh())
    .catch(() => uni.stopPullDownRefresh());
});
const { pageIsScroll, onPageScroll } = usePageScroll();

const reloadData = () => {
  return guider_cash_index_api().then((resp) => {
    adList.value = resp.banner;

    const taking_order = resp.menu_title.find((i) => i.key === "taking_order");
    if (taking_order) {
      taskData.title = taking_order.title;
      taskData.desc = taking_order.sub_title;
    }

    taskData.agency_menu_pic = resp.agency_menu_pic;
    taskData.custom_menu_pic = resp.custom_menu_pic;
    taskList.value[0] = resp.agency_demand;
    taskList.value[1] = resp.agency_pics;
    taskList2.value[0] = resp.custom_demand;
    taskList2.value[1] = resp.custom_pics;

    const culture = resp.menu_title.find((i) => i.key === "culture");
    if (culture) {
      storeData.title = culture.title;
      storeData.desc = culture.sub_title;
    }
    const open_shop = resp.open_shop;
    storeData.video_pic = open_shop.video_pic;
    storeData.video_url = open_shop.video_url;
    storeData.shop_bg_pic = resp.shop_bg_pic;
    const shop = resp.menu_title.find((i) => i.key === "shop");
    if (shop) {
      storeData.sub_title = shop.title;
    }
    storeList.value = open_shop.shop_example;

    const video = resp.menu_title.find((i) => i.key === "video");
    if (video) {
      explainData.title = video.title;
      explainData.desc = video.sub_title;
    }
    const guider_explain = resp.guider_explain;
    explainData.video_pic = guider_explain.video_pic;
    explainData.video_url = guider_explain.video_url;
    explainData.name = guider_explain.title;
    explainData.avatar_url = guider_explain.avatar_url;
    explainData.fullname = guider_explain.fullname;
    explainData.tags = guider_explain.tags;
    explainData.audio_url = guider_explain.audio_url;
    explainData.audio_time = guider_explain.audio_time;
  });
};

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const ad = adList.value[adIndex.value];
  ad.url.startsWith("http")
    ? Router.navigateToWeb(ad.url, "1")
    : Router.navigateTo(ad.url);
};

const taskData = reactive({
  title: "需求广场",
  desc: "",
  agency_menu_pic: "",
  custom_menu_pic: "",
});
const taskList = ref<any[][]>([[], []]);
const taskList2 = ref<any[][]>([[], []]);
const taskClick = (index: number) => {
  checkCertificate((isLogin) => {
    Router.navigateToOrRedirectTo(isLogin, `/package/square/pages/task/list`);
  });
};

const storeData = reactive({
  title: "开个文旅小店",
  desc: "",
  video_pic: "",
  video_url: "",
  shop_bg_pic: "",
  sub_title: "示例小程序个人店铺",
});
const storeList = ref<any[]>([]);
const storeClick = (index: number) => {
  if (index === -1) {
    // 视频
    mediaVideo2.value?.pause();
    audioCtx.pause();
  } else if (index === -2) {
    // 大图
    previewImage([storeData.shop_bg_pic], 0);
  } else if (index === -3) {
    // 开店
    checkCertificate((isLogin) => {
      isLogin && Router.navigateBack();
      popupModal.value?.show(
        {
          content: "如需开店，请联系客服",
          cancelText: "我知道了",
          confirmText: "联系客服",
        },
        () => {
          Router.navigateTo("/package/other/pages/wechat/index");
        }
      );
    });
  } else {
    Router.navigateToMiniProgram(storeList.value[index].url);
  }
};

const explainData = reactive({
  title: "多元化讲解",
  desc: "",
  video_pic: "",
  video_url: "",
  name: "",
  avatar_url: "",
  fullname: "",
  tags: "",
  audio_url: "",
  audio_time: "",
});
const explainClick = (index: number) => {
  if (index === -1) {
    // 视频
    mediaVideo.value?.pause();
    audioCtx.pause();
  } else if (index === -2) {
    // 音频
    if (audioCtx.src) {
      audioCtx.paused ? audioCtx.play() : audioCtx.pause();
    } else {
      audioData.duration = Date.minuteToNum(explainData.audio_time);
      audioCtx.src = explainData.audio_url;
      audioCtx.play();
      audioData.paused = false;
    }
    mediaVideo.value?.pause();
    mediaVideo2.value?.pause();
  } else {
    checkCertificate((isLogin) => {
      Router.navigateToOrRedirectTo(isLogin, "/package/voice/pages/index");
    });
  }
};

const checkCertificate = (callback: (isLogin: boolean) => void) => {
  Account.checkLogin((isLogin) => {
    // 已认证
    if (AppData.userData.is_guide_certification === 1) return callback(isLogin);

    isLogin && Router.navigateBack();
    popupModal.value?.show(
      {
        content:
          "你好！这里是全球导游人的家园，为了能给你提供针对性的专业内容服务，需要对你身份进行基础认证，敬请理解！",
        confirmText: "开始认证",
        translateY: "-55%",
      },
      () => {
        Router.navigateTo(
          AppData.userData.status === -1
            ? "/package/guider/pages/apply/type"
            : "/package/guider/pages/apply/detail"
        );
      }
    );
  });
};

const { swipeData, swipeChange } = useSwipe();
const { swipeData: swipeData2, swipeChange: swipeChange2 } = useSwipe();
const { audioCtx, audioData } = useAudio();

const mediaVideo = ref<InstanceType<typeof MediaVideo>>();
const mediaVideo2 = ref<InstanceType<typeof MediaVideo>>();
const popupModal = ref<InstanceType<typeof PopupModal>>();

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/pages/index/square"
);
</script>

<template>
  <NavBar title="执业变现" />
  <NavBg :retract="pageIsScroll" url="/static/index-bg.png" />
  <NavSpace />

  <view class="square-ad">
    <view class="square-ad-bg"></view>
    <view class="square-ad-swipe" @click="adClick">
      <Swipe v-model="adIndex" :listData="adList" labelKey="img_url" autoplay />
    </view>
    <view class="square-ad-dot">
      <SwipeDot v-model="adIndex" :total="adList.length" />
    </view>
  </view>

  <view class="square-task">
    <view class="square-task-head">
      <IndexMenuTitle :title="taskData.title" />
      <view class="square-task-more" @click="taskClick(-1)">
        <IndexMoreBtn />
      </view>
    </view>
    <view class="square-task-desc">{{ taskData.desc }}</view>
    <view class="square-task-wrapper">
      <view class="square-task-bg"></view>
      <image class="square-task-title2" :src="taskData.agency_menu_pic" />
      <view style="position: relative" @click="taskClick">
        <swiper
          class="square-task-swipe"
          :current="swipeData.current"
          circular
          autoplay
          @change="swipeChange"
        >
          <swiper-item v-for="i of taskList[0]" :key="i.id">
            <SquareTaskItem :info="i" />
          </swiper-item>
        </swiper>
        <view class="square-task-dot">
          <SwipeDot
            v-model="swipeData.index"
            :total="taskList[0].length"
            color="#ff8b8b"
            backgroundColor="rgba(255, 204, 204, 0.5)"
          />
        </view>
      </view>
      <view class="square-task-data">
        <view
          v-for="(i, d) of taskList[1]"
          :key="i.id"
          @click="swipeData.current = d"
        >
          <SquareTaskItem2 :info="i" :isActive="swipeData.index === d" />
        </view>
      </view>
    </view>

    <view class="square-task-wrapper">
      <view
        class="square-task-bg"
        style="background: linear-gradient(180deg, #ffeedf 1%, #ffffff)"
      ></view>
      <image class="square-task-title2" :src="taskData.custom_menu_pic" />
      <view style="position: relative" @click="taskClick">
        <swiper
          class="square-task-swipe"
          :current="swipeData2.current"
          circular
          autoplay
          @change="swipeChange2"
        >
          <swiper-item v-for="i of taskList2[0]" :key="i.id">
            <SquareTaskItem :info="i" />
          </swiper-item>
        </swiper>
        <view class="square-task-dot">
          <SwipeDot
            v-model="swipeData2.index"
            :total="taskList2[0].length"
            color="#ff8b8b"
            backgroundColor="rgba(255, 204, 204, 0.5)"
          />
        </view>
      </view>
      <view class="square-task-data">
        <view
          v-for="(i, d) of taskList2[1]"
          :key="i.id"
          @click="swipeData2.current = d"
        >
          <SquareTaskItem2 :info="i" :isActive="swipeData2.index === d" />
        </view>
      </view>
    </view>
  </view>

  <view class="square-store">
    <view class="square-store-head">
      <IndexMenuTitle :title="storeData.title" />
    </view>
    <view class="square-store-desc">{{ storeData.desc }}</view>
    <view class="square-store-video" @click="storeClick(-1)">
      <MediaVideo
        ref="mediaVideo"
        vid="store"
        :src="storeData.video_url"
        :poster="storeData.video_pic"
        showFullscreenBtn
      />
    </view>
    <view class="square-store-img" @click="storeClick(-2)">
      <image
        class="square-store-img2"
        :src="storeData.shop_bg_pic"
        mode="aspectFill"
      />
      <view class="square-store-img3">
        <icon type="search" size="24rpx" color="#ffffff" />&nbsp;查看大图
      </view>
    </view>
    <view class="square-store-title2">{{ storeData.sub_title }}</view>
    <view class="square-store-wrapper">
      <view
        class="square-store-item"
        v-for="(i, d) of storeList"
        :key="d"
        @click="storeClick(d)"
      >
        <SquareStoreItem :info="i" />
      </view>
    </view>
    <view class="square-store-btn" @click="storeClick(-3)">申请开店</view>
  </view>

  <view class="square-explain">
    <view class="square-explain-head">
      <IndexMenuTitle :title="explainData.title" />
    </view>
    <view class="square-explain-desc">{{ explainData.desc }}</view>
    <view class="square-explain-video" @click="explainClick(-1)">
      <MediaVideo
        ref="mediaVideo2"
        vid="explain"
        :src="explainData.video_url"
        :poster="explainData.video_pic"
        showFullscreenBtn
      />
    </view>
    <view class="square-explain-title2">试听</view>
    <view class="square-explain-card">
      <SquareExplainCard
        :info="explainData"
        :currentTime="audioData.currentTime"
        :percent="audioData.percent"
      >
        <view class="square-explain-player" @click="explainClick(-2)">
          <MediaCircle :modelValue="audioData.percent">
            <view class="square-explain-player2">
              <image
                class="square-explain-player3"
                :src="
                  audioData.paused
                    ? '/static/square-explain-paused.png'
                    : '/static/square-explain-playing.png'
                "
              />
            </view>
          </MediaCircle>
        </view>
      </SquareExplainCard>
      <view class="square-explain-btn" @click="explainClick(-3)">
        我也来录制
      </view>
    </view>
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
  padding-bottom: 60rpx;
}

.square-ad {
  position: relative;
  margin: 0 40rpx 52rpx;

  .square-ad-bg {
    position: absolute;
    left: 20rpx;
    top: 18rpx;
    right: 20rpx;
    height: 244rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20rpx);
  }

  .square-ad-swipe {
    position: relative;
    height: 250rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .square-ad-dot {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
  }
}

.square-task {
  padding-bottom: 20rpx;

  .square-task-head {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 12rpx;
  }

  .square-task-more {
    margin-left: auto;
  }

  .square-task-desc {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
    color: #999999;
    line-height: 36rpx;
  }

  .square-task-wrapper {
    position: relative;
    padding-top: 28rpx;
    padding-bottom: 30rpx;
    margin: 0 30rpx 40rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .square-task-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(180deg, #ffdfdf 1%, #ffffff);
    opacity: 0.8;
  }

  .square-task-title2 {
    position: relative;
    display: block;
    width: 176rpx;
    height: 36rpx;
    margin-left: 20rpx;
    margin-bottom: 28rpx;
  }

  .square-task-swipe {
    position: relative;
    height: 240rpx;
    margin: 0 20rpx 30rpx 30rpx;
    border-radius: 20rpx;
    border: 1rpx solid rgba(255, 93, 0, 0.2);
    overflow: hidden;
  }

  .square-task-dot {
    position: absolute;
    right: 50rpx;
    bottom: 20rpx;
  }

  .square-task-data {
    display: flex;
    align-items: center;
    padding-left: 20rpx;
  }
}

.square-store {
  margin-bottom: 60rpx;

  .square-store-head {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 12rpx;
  }

  .square-store-desc {
    padding-left: 30rpx;
    margin-bottom: 50rpx;
    font-size: 26rpx;
    color: #999999;
    line-height: 36rpx;
  }

  .square-store-video {
    height: 388rpx;
    margin: 0 30rpx 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .square-store-img {
    position: relative;
    margin: 0 30rpx 40rpx;
  }

  .square-store-img2 {
    display: block;
    width: 100%;
    height: 366rpx;
  }

  .square-store-img3 {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    display: flex;
    align-items: center;
    height: 48rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    font-weight: bold;
    border-radius: 24rpx;
    background: rgba(0, 0, 0, 0.4);
  }

  .square-store-title2 {
    padding-left: 54rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .square-store-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
  }

  .square-store-item {
    margin: 0 26rpx;
  }

  .square-store-btn {
    margin: 0 64rpx;
    font-size: 28rpx;
    color: #ff7900;
    line-height: 76rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 42rpx;
    border: 2rpx solid #ff7900;
  }
}

.square-explain {
  .square-explain-head {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 12rpx;
  }

  .square-explain-desc {
    padding-left: 30rpx;
    margin-bottom: 50rpx;
    font-size: 26rpx;
    color: #999999;
    line-height: 36rpx;
  }

  .square-explain-video {
    height: 388rpx;
    margin: 0 30rpx 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .square-explain-title2 {
    padding-left: 54rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .square-explain-card {
    position: relative;
    padding: 30rpx;
    margin: 0 30rpx;
    border-radius: 20rpx;
    background: linear-gradient(180deg, #ffeedf 1%, #ffffff);
  }

  .square-explain-player {
    margin-left: 30rpx;
    font-size: 44rpx;
  }

  .square-explain-player2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
    background-color: #ffffff;
  }

  .square-explain-player3 {
    width: 20rpx;
    height: 20rpx;
  }

  .square-explain-btn {
    font-size: 28rpx;
    color: #ff7900;
    line-height: 76rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 42rpx;
    border: 2rpx solid #ff7900;
  }
}
</style>
